<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{{ i18n(key='navigation_online_message') }} - {{ site_info.name }}</title>
    <link rel="shortcut icon" href="{{ url_for('static', path='favicon.ico') }}" type="image/x-icon">
    <meta name="keywords" content="{{ site_info.keyword }}"/>
    <meta name="description" content="{{ site_info.description }}"/>
    <meta name="applicable-device" content="pc,mobile"/>
    <link href="{{ url_for('static', path='css/bootstrap.min.css') }}" rel="stylesheet"/>
    <link href="{{ url_for('static', path='css/bxslider.css') }}" rel="stylesheet"/>
    <link href="{{ url_for('static', path='css/style.css') }}" rel="stylesheet"/>
    <script src="{{ url_for('static', path='js/jquery.min.js') }}"></script>
    <script src="{{ url_for('static', path='js/bxslider.min.js') }}"></script>
    <script src="{{ url_for('static', path='js/common.js') }}"></script>
    <script src="{{ url_for('static', path='js/bootstrap.min.js') }}"></script>
</head>
<body>
    {% include 'layout/header.html' %}
    <div class="page_bg" style="background: url({{ url_for('static', path='images/detail_bg.jpg') }}) center top no-repeat;"></div>
    <div class="bread_bg">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <div class="bread_nav">
                        <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
                        <a href="{{ url_for('index') }}">{{ i18n(key='navigation_home') }}</a> >
                        <a href="{{ url_for('online_message') }}">{{ i18n(key='navigation_online_message') }}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <!-- left -->
            <div class="col-xs-12 col-sm-4 col-md-3">
                <h3 class="left_h3">
                    <span>{{ i18n(key='navigation_online_message') }}</span>
                </h3>
                <div class="left_column">
                    <ul class="left_nav_ul" id="firstpane">
                        <li><a href="{{ url_for('online_message') }}" class="biglink left_active">{{ i18n(key='navigation_online_message') }}</a></li>
                    </ul>
                </div>
                {% include 'layout/news_sidebar.html' %}
            </div>
            <!-- right -->
            <div class="col-xs-12 col-sm-8 col-md-9" style="float:right">
                <div class="right_head">
                    <h2><span>{{ i18n(key='navigation_online_message') }}</span></h2>
                </div>
                <div class="right_contents">
                    <div class="met-feedback-body">
                        <form action="#" enctype="multipart/form-data" method="post">
                            <div class="form-group">
                                <div><input name="name" id="name" class="form-control" type="text" placeholder="{{ i18n(key='message_input_placeholder_name') }}"></div>
                            </div>
                            <div class="form-group">
                                <div><input name="tel" id="tel" class="form-control" type="text" placeholder="{{ i18n(key='message_input_placeholder_tel') }}"></div>
                            </div>
                            <div class="form-group">
                                <div><input name="email" id="email" class="form-control" type="text" placeholder="{{ i18n(key='message_input_placeholder_email') }}"></div>
                            </div>
                            <div class="form-group">
                                <div><textarea name="content" id="content" class="form-control" placeholder="{{ i18n(key='message_input_placeholder_content') }}" rows="5"></textarea></div>
                            </div>
                            <div class="form-group col-xs-9 col-sm-9 col-md-9">
                                <div><input name="vcode" id="vcode" class="form-control" type="text" placeholder="{{ i18n(key='message_input_placeholder_verify') }}"></div>
                            </div>
                            <div class="form-group col-xs-3 col-sm-3 col-md-3">
                                <div class="verify_code" style="text-align:center"></div>
                            </div>
                            <div class="form-group margin-bottom-0">
                                <input type="button" class="btn btn-primary btn-lg btn-block btn-squared" value="{{ i18n(key='message_submit') }}" id="tj">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% include 'layout/footer.html' %}
</body>
<script src="{{ url_for('static', path='layer/layer.js') }}"></script>
<script>

verify_code();

$(".verify_code").click(function(){
    verify_code();
});

$('#tj').click(function() {
    var name = $('#name').val();
    var tel = $('#tel').val();
    var email = $('#email').val();
    var content = $('#content').val();
    var vcode = $("#vcode").val();

    if (name == '') {
        layer.alert('{{ i18n(key='message_tip_name') }}',function(index){
            layer.close(index);
            $("#name").focus();
        });
        return false;
    }
    if (tel == "" && email == "") {
        layer.alert('{{ i18n(key='message_tip_tel_or_email') }}',function(index){
            layer.close(index);
            if (tel == "") {
                $("#tel").focus();
            } else {
                $("#email").focus();
            }
        });
        return false;
    }
    if (tel != "" && !tel.match(/^[0-9-]+$/)) {
        layer.alert('{{ i18n(key='message_tip_tel_error') }}',function(index){
            layer.close(index);
            $("#tel").focus();
        });
        return false;
    }
    if (email != "" && !email.match(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/)) {
        layer.alert('{{ i18n(key='message_tip_email_error') }}',function(index){
            layer.close(index);
            $("#email").focus();
        });
        return false;
    }
    if (content == '') {
        layer.alert('{{ i18n(key='message_tip_content') }}',function(index){
            layer.close(index);
            $("#content").focus();
        });
        return false;
    }
    if (vcode == '') {
        layer.alert('{{ i18n(key='message_tip_verify') }}',function(index){
            layer.close(index);
            $("#code").focus();
        });
        return false;
    }

    $.ajax({
        type: "POST",
        async: false,
        url: "{{ url_for('receive_message') }}",
        contentType: "application/json",
        data: JSON.stringify({
            name: name,
            tel: tel,
            email: email,
            content: content,
            verify_code: vcode
        }),
        success: function(data){
            if(data.code == 200){
                layer.alert('{{ i18n(key='message_tip_success') }}',function(){
                    name = $('#name').val("");
                    tel = $('#tel').val("");
                    email = $('#email').val("");
                    content = $('#content').val("");
                    vcode = $("#vcode").val("");
                    window.location.reload("");
                });
            }else{
                layer.alert(data.msg)
            }
        },
        error: function(data){
            if ( data.responseJSON ) {
                layer.alert(data.responseJSON.code + " - " + data.responseJSON.message)
            } else {
                layer.alert('{{ i18n(key='message_tip_http_error') }}')
            }
            verify_code();
        }
    });
});

function verify_code(){
    $.ajax({
        method: "POST",
        url: "{{ url_for('generate_captcha') }}",
        success: function(r){
            $(".verify_code").html('<img src="'+r.data.captcha+'" style="width: 100px; height: 30px; border: 0;" alt=" ">')
        },
    });
}
</script>
</html>